<!-- 
	这里不需要具有完全的布局，因为这个页面将与Ajax解析
-->
<!-- 顶部导航栏 -->
<div class="navbar">
	<div class="navbar-inner">
		<div class="left">
			<a href="#" class="back link"> <i class="icon icon-back"></i><span>返回</span></a>
		</div>
		<div class="center sliding">
			卡片
		</div>
	</div>
</div>
<div class="pages">
	<!-- Page, data-page contains page name-->
	<div data-page="cards" class="page no-tabbar">
		<!-- Scrollable page content-->
		<div class="page-content">
		<style>
		  .demo-card-header-pic .card-header {
		  	color:#007AFF;
		  	background:#FF0000;
		    height: 40vw;
		    background-size: cover;
		    background-position: center;
		  }
		</style>
		<div id="cards">
			<div class="card demo-card-header-pic" v-for="item in items">
			
				<div v-if="(item.picUrl == '')">
					<div style="background-image:url(http://img3.imgtn.bdimg.com/it/u=4245182840,198094007&fm=21&gp=0.jpg)" valign="bottom" class="card-header color-white no-border">
						{{ item.author }}
					</div>
				</div>
				<div v-else>
					<div style="background-image:url({{ item.picUrl }})" valign="bottom" class="card-header color-white no-border">
						{{ item.author }}
					</div>
				</div>
				
				
				<div class="card-content">
					<div class="card-content-inner">
						<p class="color-gray">
							{{ item.author }}
						</p>
						<p>
							{{ item.content }}
						</p>
					</div>
				</div>
				<div class="card-footer">
					<a href="#" class="link">喜欢</a>
					<a href="#" class="link">阅读</a>
				</div>
			</div>
		</div>	
		</div>
	</div>
</div>